<template>
  <view class="conversation-list-container">
    <!-- 顶部导航栏 -->
    <view class="list-header">
      <view class="header-left" @click="closeList">
        <uni-icons type="close" size="32" color="#333"></uni-icons>
      </view>
      <view class="header-title">奇思妙想茶话会</view>
      <view class="header-right" @click="refreshConversations">
        <uni-icons type="refresh" size="32" color="#333"></uni-icons>
      </view>
    </view>

    <!-- 会话列表 -->
    <scroll-view 
      class="conversation-content" 
      scroll-y
      show-scrollbar
    >
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <uni-icons type="spinner-cycle" size="24" color="#07c160" animation="spin"></uni-icons>
        <text class="loading-text">加载中...</text>
      </view>
      <!-- 空状态 -->
      <view v-else-if="conversations.length === 0" class="empty-state">
        <view class="empty-icon">
          <uni-icons type="chat" size="64" color="#ccc"></uni-icons>
        </view>
        <text class="empty-text">暂无聊天记录</text>
          <text class="empty-subtitle">开始与挚友小星聊天吧</text>
      </view>
      <!-- 会话列表 -->
      <template v-else>
        <view 
          v-for="(conversation, index) in conversations" 
          :key="conversation.id || index"
          class="conversation-item"
          @click="selectConversation(conversation)"
        >
          <!-- 会话头像 -->
          <view class="conversation-avatar">
            <text class="avatar-text">小星</text>
          </view>
          
          <!-- 会话信息 -->
          <view class="conversation-info">
            <view class="conversation-header">
              <text class="conversation-title">{{ conversation.title || '未命名聊天' }}</text>
              <text class="conversation-time">{{ formatTime(conversation.update_time) }}</text>
            </view>
            <view class="conversation-footer">
              <text class="conversation-preview">{{ getPreviewMessage(conversation) }}</text>
              <view v-if="conversation.unread_count && conversation.unread_count > 0" class="unread-badge">
                <text class="unread-count">{{ conversation.unread_count > 99 ? '99+' : conversation.unread_count }}</text>
              </view>
            </view>
          </view>
            
            <!-- 删除按钮 -->
            <view class="delete-btn" @click.stop="handleDeleteClick($event, conversation.id)">
              <uni-icons type="trash" size="20" color="#ff4d4f"></uni-icons>
            </view>
        </view>
      </template>

      <!-- 加载更多 -->
      <view v-if="hasMore && conversations.length > 0" class="load-more" @click="loadMoreConversations">
        <text class="load-more-text">加载更多</text>
        <text class="load-more-debug" v-if="false">调试: hasMore={{hasMore}} 数量={{conversations.length}}</text>
      </view>
      
      <!-- 底部占位元素，确保最后一个会话项完全可见 -->
      <view class="bottom-spacer"></view>
    </scroll-view>

    <!-- 删除确认弹窗 -->
    <uni-popup ref="deletePopup" :mask-click="false">
      <view class="delete-dialog">
        <view class="dialog-title">确认删除</view>
        <view class="dialog-content">确定要删除这个聊天吗？删除后不可恢复。</view>
        <view class="dialog-actions">
          <button class="dialog-btn cancel-btn" @click="cancelDelete">取消</button>
          <button class="dialog-btn confirm-btn" @click="deleteConversation">删除</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { ref, onMounted, computed, nextTick } from 'vue'
import chatApi from '../../api/chat'
import { getUserInfo } from '../../api/auth'
// 导入uni-ui组件
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'

export default {
  name: 'ConversationList',
  components: {
    'uni-icons': uniIcons,
    'uni-popup': uniPopup
  },
  setup() {
    // 会话数据
    const conversations = ref([])
    const loading = ref(false)
    const hasMore = ref(true)
    const lastId = ref('')
    const limit = ref(20) // 初始请求数量
    
    // 弹窗状态
    const showDeleteDialog = ref(false)
    const currentDeleteId = ref('')
    // 组件引用
    const deletePopup = ref(null)

    // 格式化时间
    const formatTime = (time) => {
      console.log('格式化时间输入:', time, '类型:', typeof time)
      if (!time) return ''
      
      // 处理时间戳
      const date = new Date(time)
      const now = new Date()
      const diff = now - date
      
      // 处理无效日期
      if (isNaN(date.getTime())) {
        console.log('无效日期:', time)
        return ''
      }
      
      // 详细的时间信息日志，用于调试
      console.log('日期对象:', date.toISOString())
      console.log('时间差(毫秒):', diff)
      
      // 小于1分钟
      if (diff < 60000) {
        return '刚刚'
      }
      // 小于1小时
      if (diff < 3600000) {
        return `${Math.floor(diff / 60000)}分钟前`
      }
      // 小于24小时
      if (diff < 86400000) {
        return `${Math.floor(diff / 3600000)}小时前`
      }
      // 小于7天
      if (diff < 604800000) {
        return `${Math.floor(diff / 86400000)}天前`
      }
      // 超过7天显示具体日期
      const month = date.getMonth() + 1
      const day = date.getDate()
      const formattedDate = `${month}-${day}`
      // 添加完整日期信息到日志，便于调试
      console.log('格式化结果:', formattedDate, '完整日期:', date.toLocaleDateString())
      return formattedDate
    }

    // 获取预览消息
    const getPreviewMessage = (conversation) => {
      console.log('获取预览消息，会话:', conversation)
      // 后端返回的数据中没有last_message字段，返回默认消息
      return '开始新聊天'
    }

    // 获取会话列表
    const fetchConversations = async (isLoadMore = false) => {
      console.log('===== fetchConversations 被调用 =====')
      console.log('操作模式:', isLoadMore ? '(加载更多)' : '(刷新)')
      console.log('调用前状态:')
      console.log('loading.value:', loading.value)
      console.log('lastId.value:', lastId.value)
      console.log('limit.value:', limit.value)
      
      if (loading.value) {
        console.log('已经在加载中，停止重复请求')
        return
      }
      
      console.log('设置loading为true')
      loading.value = true
      
      try {
        // 从本地存储获取已登录用户信息，并确保正确解析
        let userInfo = uni.getStorageSync('userInfo') || {};
        console.log('获取到的用户信息:', userInfo);
        console.log('用户信息类型:', typeof userInfo);
        
        // 确保userInfo是对象
        if (typeof userInfo === 'string') {
            try {
                userInfo = JSON.parse(userInfo);
                console.log('解析后的用户信息:', userInfo);
            } catch (e) {
                console.error('解析用户信息失败:', e);
                userInfo = {};
            }
        } else if (userInfo === null) {
            userInfo = {};
        }
        
        console.log('用户信息属性检查:', Object.keys(userInfo || {}));
        
        // 更全面地检查和获取用户名
        let username = '';
        if (userInfo && typeof userInfo === 'object') {
            console.log('检查username属性:', userInfo.username);
            console.log('检查user属性:', userInfo.user);
            console.log('检查nickname属性:', userInfo.nickname);
            username = userInfo.username || userInfo.user || userInfo.nickname || '';
            
            // 特殊处理：如果username存在但为空字符串
            if (!username && userInfo.hasOwnProperty('username')) {
                username = String(userInfo.username);
            }
        }
        
        // 如果仍未获取到有效的用户名，使用默认值
        if (!username) {
            username = 'zzz';
            console.warn('未获取到有效用户名，使用默认值:', username);
        }
        
        console.log('当前登录用户名:', username)
        
        // 创建参数对象，确保格式与API要求一致
        const params = {
          user: username,
          last_id: lastId.value || '',
          limit: limit.value
        }
        
        console.log('请求参数:', params)
        
        // 调用API获取会话列表
        const response = await chatApi.getConversations(params)
        console.log('API响应原始数据:', JSON.stringify(response))
        
        // 灵活处理不同的响应格式
        let conversationsData = []
        
        // 尝试多种可能的响应格式
        console.log('开始处理响应格式...')
        
        // 格式4: {conversations: [会话数组]} (根级别) - 优先处理用户提供的后端格式
        if (response && response.conversations && Array.isArray(response.conversations)) {
          console.log('响应格式匹配: {conversations: [会话数组]} (根级别)')
          conversationsData = response.conversations
          console.log('从根级别conversations字段提取到数据，长度:', conversationsData.length)
        } else if (Array.isArray(response)) {
          // 格式1: 直接返回会话数组
          console.log('响应格式: 直接返回会话数组')
          conversationsData = response
        } else if (response && Array.isArray(response.data)) {
          // 格式2: {data: [会话数组]}
          console.log('响应格式: {data: [会话数组]}')
          conversationsData = response.data
        } else if (response && response.data && Array.isArray(response.data.conversations)) {
          // 格式3: {data: {conversations: [会话数组]}}
          console.log('响应格式: {data: {conversations: [会话数组]}}')
          conversationsData = response.data.conversations
        } else {
          // 其他格式
          console.log('响应格式不匹配预期，response对象结构:', Object.keys(response || {}))
          console.log('响应内容详情:', JSON.stringify(response))
          
          // 尝试直接访问response.conversations作为最后的后备方案
          if (response && response.conversations) {
            console.log('尝试直接访问response.conversations:', response.conversations)
            conversationsData = Array.isArray(response.conversations) ? response.conversations : []
          }
        }
        
        console.log('提取到的会话数据数量:', conversationsData.length)
        console.log('会话数据详情:', JSON.stringify(conversationsData))
        
        // 转换数据格式
        console.log('准备转换会话数据，原始数据长度:', conversationsData.length)
        
        if (conversationsData.length > 0) {
          console.log('开始转换会话数据...')
          const formattedConversations = conversationsData.map((item, index) => {
            console.log(`处理会话项 ${index}:`, JSON.stringify(item))
            
            // 详细的字段映射，确保处理后端返回的格式
            // 处理时间戳：后端返回的是秒级时间戳，需要转换为毫秒级
            const formatTimestamp = (timestamp) => {
              if (!timestamp) return null;
              // 如果是数字类型的时间戳（秒级），转换为毫秒级
              if (typeof timestamp === 'number') {
                return timestamp * 1000;
              }
              return timestamp;
            };
            
            const formattedItem = {
              id: item.id || `temp_${index}`, // 确保有ID，使用后端返回的id字段
              title: item.name || item.title || '未命名聊天', // 支持name字段作为标题
              update_time: formatTimestamp(item.updated_at), // 处理后端返回的时间戳
              created_at: formatTimestamp(item.created_at), // 处理后端返回的时间戳
              last_message: '', // 后端没有提供last_message，设置为空
              unread_count: 0 // 默认未读数为0
            }
            
            console.log(`转换结果 ${index}:`, JSON.stringify(formattedItem))
            return formattedItem
          })
          
          console.log('转换后的会话数据总数:', formattedConversations.length)
          console.log('转换后的会话数据示例:', JSON.stringify(formattedConversations[0]))
          
          // 更新会话列表 - 刷新时替换，加载更多时追加
            if (isLoadMore) {
              // 加载更多模式 - 追加数据
              console.log('加载更多模式，当前会话数量:', conversations.value.length)
              // 去重处理，避免重复添加相同的会话
              const currentIds = new Set(conversations.value.map(item => item.id))
              const newConversations = formattedConversations.filter(item => !currentIds.has(item.id))
              
              console.log('处理加载更多模式...')
              console.log('newConversations.length:', newConversations.length)
              console.log('formattedConversations.length:', formattedConversations.length)
              console.log('limit.value:', limit.value)
              
              if (newConversations.length > 0) {
                conversations.value = [...conversations.value, ...newConversations]
                console.log('追加了新会话，新增数量:', newConversations.length, '总数量:', conversations.value.length)
              } else {
                console.log('没有新的会话数据，设置hasMore为false')
                hasMore.value = false
              }
              
              // 如果返回的数据少于请求的数量，说明没有更多数据了
              if (formattedConversations.length === 0 || formattedConversations.length < limit.value) {
                console.log('条件满足: 返回数据数量 < 请求数量，设置hasMore为false')
                console.log('formattedConversations.length:', formattedConversations.length, 'vs limit.value:', limit.value)
                hasMore.value = false
              } else {
                // 否则设置hasMore为true，允许加载更多
                console.log('条件满足: 返回数据数量 >= 请求数量，设置hasMore为true')
                hasMore.value = true
              }
              
              console.log('加载更多后hasMore状态:', hasMore.value)
            } else {
              // 刷新模式 - 替换数据
              conversations.value = formattedConversations
              console.log('会话列表已更新，最终数量:', conversations.value.length)
              
              // 如果返回的数据少于请求的数量，说明没有更多数据了
              if (formattedConversations.length === 0 || formattedConversations.length < limit.value) {
                console.log('没有更多数据了，设置hasMore为false')
                hasMore.value = false
              } else {
                // 否则设置hasMore为true，允许加载更多
                hasMore.value = true
              }
            }
            
            // 确保UI正确更新
            await nextTick()
        } else {
          // 没有数据，显示空状态
          console.log('没有找到会话数据，清空会话列表')
          conversations.value = []
        }
      } catch (error) {
        console.error('获取会话列表失败，错误类型:', error?.constructor?.name || 'Unknown')
        console.error('错误对象:', error)
        console.error('错误详情:', JSON.stringify(error, Object.getOwnPropertyNames(error || {})))
        
        // 清空会话列表
        conversations.value = []
        console.log('发生错误时清空会话列表')
        
        // 提供更详细的错误信息
        let errorMessage = '加载会话列表失败'
        if (error?.message) {
          errorMessage += `: ${error.message}`
        } else if (error?.errMsg) {
          errorMessage += `: ${error.errMsg}`
        }
        
        // 显示错误提示
        uni.showToast({
          title: errorMessage.length > 15 ? '加载会话列表失败，请重试' : errorMessage,
          icon: 'none',
          duration: 2000
        })
      } finally {
        console.log('===== fetchConversations 完成 =====')
        console.log('设置loading为false')
        loading.value = false
        console.log('最终状态:')
        console.log('loading.value:', loading.value)
        console.log('hasMore.value:', hasMore.value)
        console.log('conversations.value.length:', conversations.value.length)
        console.log('lastId.value:', lastId.value)
      }
    }

    // 刷新会话列表
    const refreshConversations = async () => {
      console.log('刷新会话列表');
      if (loading.value) {
        console.log('已经在加载中，停止重复请求');
        return;
      }
      // 重置状态
      lastId.value = '';
      hasMore.value = true;
      limit.value = 20; // 重置limit为初始值
      // 重新获取会话列表
      await fetchConversations();
    }

    // 加载更多会话
    const loadMoreConversations = async () => {
      // 强制显示一个toast提示，确认函数被调用
      uni.showToast({
        title: '开始加载更多...',
        icon: 'none',
        duration: 1500
      });
      
      console.log('===== 加载更多按钮被点击 =====');
      console.log('加载更多会话 - 当前状态:');
      console.log('loading.value:', loading.value);
      console.log('hasMore.value:', hasMore.value);
      console.log('conversations.value.length:', conversations.value.length);
      console.log('当前limit值:', limit.value);
      
      // 增强的条件检查，提供用户反馈
      if (loading.value) {
        console.log('条件不满足: 已经在加载中');
        return;
      }
      
      if (!hasMore.value) {
        console.log('条件不满足: hasMore为false');
        uni.showToast({
          title: '没有更多会话了',
          icon: 'none',
          duration: 1500
        });
        return;
      }
      
      if (conversations.value.length === 0) {
        console.log('条件不满足: conversations列表为空');
        return;
      }
      
      // 增加limit值5个
      limit.value += 5;
      console.log('增加limit值后:', limit.value);
      
      console.log('所有条件都满足，开始加载更多');
      // 设置为加载更多模式
      const isLoadMore = true;
      
      try {
        // 验证conversations数组最后一项
        const lastConversation = conversations.value[conversations.value.length - 1];
        console.log('最后一个会话:', lastConversation);
        console.log('最后一个会话ID:', lastConversation?.id);
        
        // 更新lastId为最后一个会话的ID，这是分页的关键
        if (lastConversation && lastConversation.id) {
          lastId.value = lastConversation.id;
          console.log('更新后的lastId:', lastId.value);
          
          // 显示加载中状态
          loading.value = true;
          
          // 执行加载更多
          await fetchConversations(isLoadMore);
        } else {
          console.error('无法获取最后一个会话的ID');
          uni.showToast({
            title: '获取会话信息失败',
            icon: 'none',
            duration: 1500
          });
        }
      } catch (error) {
        console.error('加载更多会话时发生错误:', error);
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none',
          duration: 1500
        });
        // 确保加载状态被重置
        loading.value = false;
      }
    }

    // 选择会话
    const selectConversation = async (conversation) => {
      console.log('【会话点击】事件触发！')
      console.log('【会话点击】完整会话对象:', conversation)
      console.log('【会话点击】会话ID:', conversation?.id)
      console.log('【会话点击】会话ID类型:', typeof conversation?.id)
      
      // 确保conversation和id存在
      if (!conversation) {
        console.error('【会话点击】错误：conversation对象不存在')
        return
      }
      
      if (!conversation.id) {
        console.error('【会话点击】错误：会话ID不存在')
        return
      }
      
      // 准备通过URL参数传递conversationId
      console.log('【会话点击】准备通过URL参数传递conversationId:', conversation.id)
      
      // 预加载会话历史消息（在跳转前调用API）
      try {
        console.log('【会话点击】开始预加载会话历史消息')
        // 显示加载提示
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        
        // 从本地存储获取用户信息
        let userInfo = uni.getStorageSync('userInfo') || {}
        if (typeof userInfo === 'string') {
          try {
            userInfo = JSON.parse(userInfo)
          } catch (e) {
            userInfo = {}
          }
        }
        
        // 获取用户名
        let username = userInfo.username || userInfo.user || userInfo.nickname || 'anonymous'
        
        // 动态导入chatApi（暂时注释掉API调用，避免参数错误）
        // const { default: chatApi } = await import('@/api/chat.js')
        
        try {
          // 暂时不调用API获取会话历史，避免参数错误
          console.log('【会话点击】暂时跳过预加载会话历史，避免API参数错误')
          
          // 创建空的预加载数据，确保页面有初始数据
          const emptyMessages = []
          uni.setStorageSync(`preloadedMessages_${conversation.id}`, emptyMessages)
          console.log('【会话点击】存储空的预加载消息数组')
          
          // 确保ID一致性
          console.log('【会话点击】保持使用原始conversation.id:', conversation.id)
        } catch (e) {
          console.error('【会话点击】存储预加载消息失败:', e)
        }
      } catch (error) {
        console.error('【会话点击】预加载会话历史过程中发生错误:', error)
      } finally {
        // 隐藏加载提示
        uni.hideLoading()
      }
      
      // 关键优化：清理可能存在的旧预加载数据，避免干扰
      try {
        console.log('【会话点击】清理可能的旧预加载消息')
        const keys = uni.getStorageInfoSync().keys || [];
        keys.forEach(key => {
          // 只清理其他会话的预加载消息，保留当前会话的
          if (key.startsWith('preloadedMessages_') && key !== `preloadedMessages_${conversation.id}`) {
            console.log('【会话点击】删除旧预加载消息:', key)
            uni.removeStorageSync(key);
          }
        });
        console.log('【会话点击】旧预加载消息清理完成')
      } catch (cleanupError) {
        console.error('【会话点击】清理旧预加载消息失败:', cleanupError)
      }
      
      // 执行页面跳转 - 使用更可靠的方式传递参数
      try {
        const conversationId = conversation.id
        console.log('【会话点击】准备跳转到聊天页面，会话ID:', conversationId)
        
        // 1. 先将会话ID存储到全局临时存储
        uni.setStorageSync('tempConversationId', conversationId)
        console.log('【会话点击】已将会话ID存储到临时存储')
        
        // 2. 构建目标URL
        const targetUrl = `/pages/chat/chat?conversation_id=${conversationId}`
        console.log('【会话点击】目标URL:', targetUrl)
        
        // 3. 优先使用reLaunch确保页面重新加载并能接收到参数
        console.log('【会话点击】优先使用uni.reLaunch进行跳转')
        uni.reLaunch({
          url: targetUrl,
          success: (res) => {
            console.log('【会话点击】reLaunch跳转成功:', res)
          },
          fail: (err) => {
            console.error('【会话点击】reLaunch跳转失败:', err)
            console.error('【会话点击】失败原因:', err?.errMsg)
            
            // 作为备用方案，使用switchTab
            try {
              console.log('【会话点击】尝试使用uni.switchTab进行跳转')
              uni.switchTab({
                url: targetUrl,
                success: (res) => {
                  console.log('【会话点击】switchTab跳转成功:', res)
                },
                fail: (switchErr) => {
                  console.error('【会话点击】switchTab跳转也失败:', switchErr)
                }
              })
            } catch (switchTabErr) {
              console.error('【会话点击】执行switchTab时抛出异常:', switchTabErr)
            }
          },
          complete: () => {
            console.log('【会话点击】页面跳转操作完成')
          }
        })
      } catch (error) {
        console.error('【会话点击】执行跳转时抛出异常:', error)
      }
    }

    // 关闭列表（返回上一页）
    const closeList = () => {
      // 获取当前页面栈
      const pages = getCurrentPages()
      console.log('当前页面栈长度:', pages.length)
      
      // 如果页面栈长度大于1，说明有上一页，可以安全返回
      if (pages.length > 1) {
        uni.navigateBack()
      } else {
        // 如果没有上一页（可能直接从登录页跳转过来），则跳转到tabBar的对话页面
        console.log('页面栈长度不足，跳转到对话主页')
        uni.switchTab({
          url: '/pages/chat/chat'
        })
      }
    }

    // 确认删除会话
    const confirmDeleteConversation = (id) => {
      console.log('打开删除确认弹窗，会话ID:', id)
      console.log('当前会话列表长度:', conversations.value.length)
      console.log('确认删除前检查ID存在:', conversations.value.some(item => item.id === id))
      currentDeleteId.value = id
      
      // 直接调用组件的open方法显示弹窗
      nextTick(() => {
        if (deletePopup.value) {
          console.log('调用deletePopup.open()方法')
          deletePopup.value.open()
        } else {
          console.error('deletePopup组件未获取到引用')
          // 备用方案：使用showDeleteDialog属性
          showDeleteDialog.value = true
        }
      })
    }
    
    // 处理删除按钮点击事件
    const handleDeleteClick = (event, id) => {
      console.log('删除按钮被点击，会话ID:', id)
      // 增强事件冒泡阻止，确保在所有平台上都有效
      if (event.stopPropagation) {
        event.stopPropagation();
      } else {
        event.cancelBubble = true;
      }
      // 阻止默认行为
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
      confirmDeleteConversation(id)
    }

    // 取消删除
    const cancelDelete = () => {
      console.log('取消删除操作')
      
      // 使用组件的close方法关闭弹窗
      try {
        if (deletePopup.value && typeof deletePopup.value.close === 'function') {
          console.log('调用deletePopup.close()方法')
          deletePopup.value.close()
        } else {
          console.error('deletePopup组件未获取到引用或close方法不存在')
          // 备用方案：使用showDeleteDialog属性
          showDeleteDialog.value = false
        }
      } catch (e) {
        console.error('关闭弹窗时发生错误:', e)
        // 无论如何都要重置状态
        showDeleteDialog.value = false
      }
      
      currentDeleteId.value = ''
    }
    
    // 弹窗状态变化回调
    const onPopupChange = (e) => {
      console.log('弹窗状态变化:', e.show)
    }

    // 删除会话
    const deleteConversation = async () => {
      console.log('开始执行删除会话操作，当前DeleteId:', currentDeleteId.value)
      if (!currentDeleteId.value) {
        console.warn('删除会话失败：当前没有选中要删除的会话ID')
        return
      }
      
      // 保存要删除的ID
      const deleteId = currentDeleteId.value
      
      // 创建一个函数来安全地关闭弹窗
      const safeClosePopup = () => {
        try {
          if (deletePopup.value && typeof deletePopup.value.close === 'function') {
            console.log('安全关闭deletePopup弹窗')
            deletePopup.value.close()
          } else {
            console.warn('deletePopup组件未获取到引用或close方法不存在，使用备用方案')
            showDeleteDialog.value = false
          }
        } catch (e) {
          console.error('关闭弹窗时发生异常:', e)
          // 无论如何都要重置状态
          showDeleteDialog.value = false
        }
      }
      
      try {
        // 显示加载状态
        loading.value = true
        console.log('设置删除操作加载状态为true')
        
        // 从本地存储获取已登录用户信息，并确保正确解析
        let userInfo = uni.getStorageSync('userInfo') || {};
        console.log('获取到的用户信息:', userInfo);
        console.log('用户信息类型:', typeof userInfo);
        
        // 确保userInfo是对象
        if (typeof userInfo === 'string') {
            try {
                userInfo = JSON.parse(userInfo);
                console.log('解析后的用户信息:', userInfo);
            } catch (e) {
                console.error('解析用户信息失败:', e);
                userInfo = {};
            }
        } else if (userInfo === null) {
            userInfo = {};
        }
        
        // 更全面地检查和获取用户名
        let username = '';
        if (userInfo && typeof userInfo === 'object') {
            username = userInfo.username || userInfo.user || userInfo.nickname || '';
            
            // 特殊处理：如果username存在但为空字符串
            if (!username && userInfo.hasOwnProperty('username')) {
                username = String(userInfo.username);
            }
        }
        
        // 如果仍未获取到有效的用户名，使用默认值
        if (!username) {
            username = 'zzz';
            console.warn('未获取到有效用户名，使用默认值:', username);
        }
        
        console.log('删除会话ID:', deleteId)
        console.log('当前登录用户名:', username)
        
        // 准备删除请求的数据
        const deleteData = {
          user: username
        }
        console.log('准备删除请求数据:', deleteData)
          
        // 调用删除会话API
        console.log('开始调用删除会话API')
        // 使用chatApi.deleteConversation方法调用API
        await chatApi.deleteConversation(deleteId, deleteData)
        console.log('删除会话API调用成功')
        
        // 从列表中移除会话
        const index = conversations.value.findIndex(item => item.id === deleteId)
        console.log('删除前会话列表长度:', conversations.value.length)
        console.log('找到要删除的会话索引:', index)
        if (index > -1) {
          conversations.value.splice(index, 1)
          console.log('会话已从列表中移除，删除后列表长度:', conversations.value.length)
        } else {
          console.warn('未能在列表中找到要删除的会话ID:', deleteId)
        }
        
        console.log('删除会话操作完成')
        
        // 先显示成功提示，然后再关闭弹窗
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1500
        })
        
        // 延迟关闭弹窗，让用户看到成功提示
        setTimeout(() => {
          safeClosePopup()
          // 重置删除ID
          currentDeleteId.value = ''
          console.log('弹窗已关闭，重置删除ID状态')
        }, 300)
        
      } catch (error) {
        console.error('删除会话失败:', error)
        console.error('删除会话失败详情:', JSON.stringify(error, Object.getOwnPropertyNames(error || {})))
        
        // 显示错误提示
        let errorMessage = '删除会话失败'
        if (error?.message) {
          errorMessage += `: ${error.message}`
        } else if (error?.errMsg) {
          errorMessage += `: ${error.errMsg}`
        }
        
        // 显示错误提示
        uni.showToast({
          title: errorMessage.length > 15 ? '删除会话失败，请重试' : errorMessage,
          icon: 'none',
          duration: 2000
        })
        
        // 延迟关闭弹窗，让用户看到错误信息
        setTimeout(() => {
          safeClosePopup()
          // 重置删除ID
          currentDeleteId.value = ''
          console.log('弹窗已关闭，重置删除ID状态')
        }, 300)
        
      } finally {
        loading.value = false
        console.log('删除会话操作完成，加载状态已重置为false')
      }
    }

    // 生命周期
    onMounted(() => {
      console.log('组件已挂载，开始获取会话列表')
      // 延迟一下再调用，确保DOM完全准备好
      setTimeout(() => {
        fetchConversations()
      }, 100)
    })

    return {
      // 状态
      conversations,
      loading,
      hasMore,
      showDeleteDialog,
      deletePopup,
      
      // 方法
      formatTime,
      getPreviewMessage,
      refreshConversations,
      loadMoreConversations,
      selectConversation,
      closeList,
      confirmDeleteConversation,
      cancelDelete,
      deleteConversation,
      handleDeleteClick,
      onPopupChange
    }
  }
}
</script>

<style scoped>
.conversation-list-container {
  width: 100%; /* 作为独立页面，使用100%宽度 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #FFF9FB;
  position: relative;
  overflow: hidden;
  /* 在独立页面中移除固定宽度和阴影 */
}

/* 装饰背景元素 */
.conversation-list-container::before,
.conversation-list-container::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.2;
  z-index: 0;
}

.conversation-list-container::before {
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background-color: #FF85A2;
  animation: float 8s ease-in-out infinite;
}

.conversation-list-container::after {
  bottom: -150px;
  right: -150px;
  width: 400px;
  height: 400px;
  background-color: #B794F4;
  animation: float 10s ease-in-out infinite reverse;
}

/* 顶部导航栏 */
.list-header {
  height: 56px;
  background: linear-gradient(135deg, #FF85A2, #FFADC6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4rpx 20rpx rgba(255, 133, 162, 0.3);
  border-radius: 0 0 30rpx 30rpx;
  animation: floatSoft 3s ease-in-out infinite;
}

.header-left,
.header-right {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.header-left:active,
.header-right:active {
  transform: scale(0.9);
}

.header-title {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  flex: 1;
  text-align: center;
  text-shadow: 0 2rpx 4rpx rgba(255, 133, 162, 0.3);
  letter-spacing: 1px;
  padding: 12px 0;
}

/* 会话列表 */
.conversation-content {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 自定义滚动条样式 */
.conversation-content::-webkit-scrollbar {
  width: 6px;
}

.conversation-content::-webkit-scrollbar-track {
  background: rgba(255, 133, 162, 0.1);
  border-radius: 3px;
}

.conversation-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF85A2, #FFADC6);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.conversation-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FFADC6, #FF85A2);
  transform: scaleX(1.2);
}

/* 兼容其他浏览器 */
.conversation-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 133, 162, 0.8) rgba(255, 133, 162, 0.1);
  padding-bottom: 20px; /* 调整为适中的底部内边距 */
  min-height: 100%; /* 确保滚动容器有足够高度 */
  box-sizing: border-box; /* 确保内边距不会导致容器溢出 */
  position: relative; /* 确保绝对定位元素正常工作 */
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #BDBDBD;
}

.empty-icon {
  margin-bottom: 30px;
  animation: floatSoft 3s ease-in-out infinite;
}

.empty-text {
  font-size: 18px;
  margin-bottom: 15px;
  color: #8A8A8A;
  font-weight: 500;
  letter-spacing: 1px;
}

.empty-subtitle {
  font-size: 14px;
  color: #BDBDBD;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.6;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #FF85A2;
}

.loading-text {
  margin-top: 15px;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* 会话项 */
.conversation-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  margin: 6px 12px;
  box-shadow: 0 6rpx 18rpx rgba(255, 133, 162, 0.1);
  backdrop-filter: blur(10px);
  border: 2rpx solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.conversation-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  transition: all 0.3s ease;
}

.conversation-item:active {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(8rpx);
  box-shadow: 0 8rpx 24rpx rgba(255, 133, 162, 0.15);
}

.conversation-item:active::before {
  background: linear-gradient(180deg, #FF85A2, #FFADC6);
}

/* 会话头像 */
.conversation-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF85A2, #FFADC6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
  box-shadow: 0 6rpx 20rpx rgba(255, 133, 162, 0.3);
  animation: floatSoft 3s ease-in-out infinite;
}

/* 会话信息 */
.conversation-info {
  flex: 1;
  min-width: 0;
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.conversation-title {
  font-size: 17px;
  font-weight: bold;
  color: #4A4A4A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 16px;
  letter-spacing: 1rpx;
}

.conversation-time {
  font-size: 12px;
  color: #BDBDBD;
  background: rgba(255, 133, 162, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
  letter-spacing: 0.5rpx;
}

.conversation-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.conversation-preview {
  font-size: 14px;
  color: #8A8A8A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 16px;
  letter-spacing: 0.5rpx;
  line-height: 1.4;
}

/* 未读消息提示 */
.unread-badge {
  min-width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #FF85A2, #FFADC6);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  box-shadow: 0 2rpx 8rpx rgba(255, 133, 162, 0.3);
}

.unread-count {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1rpx;
}

/* 删除按钮 */
.delete-btn {
  width: 44px; /* 进一步增大按钮尺寸，提高可点击性 */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 133, 162, 0.1);
  margin-left: 12px;
  margin-right: 16px; /* 调整边距比例 */
  transition: all 0.2s ease;
  z-index: 9999; /* 大幅提高z-index，确保绝对在最上层 */
  position: relative; /* 确保z-index生效 */
  flex-shrink: 0; /* 防止被压缩 */
  cursor: pointer; /* 添加鼠标指针样式，明确可点击 */
  user-select: none; /* 禁止文本选择 */
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
  touch-action: manipulation; /* 优化移动端触摸行为 */
  will-change: transform; /* 优化性能 */
}

.delete-btn:active {
  opacity: 1;
  background: rgba(255, 133, 162, 0.3); /* 点击时更明显 */
  transform: scale(0.9); /* 更明显的缩放效果，提供更好的点击反馈 */
  box-shadow: 0 4rpx 12rpx rgba(255, 133, 162, 0.3); /* 添加点击时的阴影效果 */
}

/* 加载更多 */
.load-more {
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
  transition: all 0.3s ease;
  cursor: pointer; /* 添加鼠标指针样式 */
  display: block; /* 确保整行可点击 */
  user-select: none; /* 禁止文本选择 */
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
  position: relative; /* 确保z-index生效 */
  z-index: 10; /* 确保在普通内容之上 */
}

/* 底部占位元素样式 */
.bottom-spacer {
  height: 100px; /* 足够大的占位空间，确保最后一个会话项完全可见 */
  clear: both; /* 确保不会与其他元素重叠 */
}

.load-more:active {
  transform: scale(0.98); /* 稍微调整缩放效果 */
}

.load-more-text {
  color: #FF85A2;
  letter-spacing: 1px;
  font-weight: 500;
  padding: 12px 30px; /* 增加内边距，扩大点击区域 */
  border-radius: 20px;
  background: rgba(255, 133, 162, 0.1);
  box-shadow: 0 4rpx 12rpx rgba(255, 133, 162, 0.1);
  transition: all 0.3s ease;
  display: inline-block;
  min-width: 120px; /* 确保有足够的点击宽度 */
}

.load-more:active .load-more-text {
  background: rgba(255, 133, 162, 0.3); /* 增强点击效果 */
  box-shadow: 0 2rpx 8rpx rgba(255, 133, 162, 0.2);
}

/* 删除确认弹窗 */
.delete-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important; /* 强制居中 */
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 30px;
  width: 85%;
  max-width: 320px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 16rpx 48rpx rgba(255, 133, 162, 0.2);
  backdrop-filter: blur(10px);
  border: 2rpx solid rgba(255, 255, 255, 0.6);
  /* 移除动画以避免影响居中 */
}

.dialog-title {
  font-size: 20px;
  font-weight: bold;
  color: #4A4A4A;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.dialog-content {
  font-size: 15px;
  color: #8A8A8A;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

.dialog-actions {
  display: flex;
  gap: 16px;
  width: 100%;
}

.dialog-btn {
  flex: 1;
  height: 44px;
  font-size: 16px;
  border-radius: 24px;
  line-height: 44px;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.cancel-btn {
  background: rgba(255, 133, 162, 0.1);
  color: #8A8A8A;
  border: none;
  font-weight: 500;
}

.cancel-btn:active {
  background: rgba(255, 133, 162, 0.2);
  transform: scale(0.95);
}

.confirm-btn {
  background: linear-gradient(135deg, #FF85A2, #FFADC6);
  color: #fff;
  border: none;
  font-weight: bold;
  box-shadow: 0 6rpx 20rpx rgba(255, 133, 162, 0.3);
}

.confirm-btn:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 16rpx rgba(255, 133, 162, 0.3);
}

/* 动画效果 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
</style>